<template>
  <!--头部导航-->
  <div style="width: 100%;height: 100%; padding: 10px;align-content: center">
    <!--报表容器-->
    <div style="display: flex">
      <div id="main" style="width: 600px;height:400px;"></div>
      <div>
        <div id="main2" style="width: 600px;height:400px;"></div>
      </div>
    </div>
      <div id="main3" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from 'echarts';
import request from "../../utils/request";

export default {
  name: "ExpenditureReport",
  data() {
    return {
      //支出占比数据
      chartDate: [],
      //折线图日期
      dataBox: {},
      //折线图时间数据
      timeData: [],
      //折线图对应数据
      valueData: [],
      //柱图排行榜姓名数据
      columnChartName: [],
      //柱图排行榜数据
      columnChartValue: []
    }
  },
  mounted() {
    this.initEcharts()
    this.ConsumptionLineChart()
    this.ConsumptionRankingColumnChart()
  },
  methods: {
    /*查询支出消费聚到占比*/
    findAllSpendingData() {
      request.get("/report/findAllSpendingData").then(res => {
        //查出数据
        this.chartDate = res.data;
        //重新加载数据
        this.initEcharts()
      })
    },
    initEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '*支出消费渠道占比',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readonly: false},
            restore: {show: false},
            saveAsImage: {show: true}
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '使用次数/占比率',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            //联动数据
            data: this.chartDate,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    /*消费折线图*/
    ConsumptionLineChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main2'));

      let option = {
        title: {
          text: '一周内消费趋势'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readonly: false},
            restore: {show: false},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: this.timeData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.valueData,
            type: 'line'
          }
        ]
      };
      myChart.setOption(option)
    },
    /*查询折线图数据*/
    findDateByLine() {
      request.get("/report/findDateByLine").then(res => {
        res.data.forEach(item => {
          /*将值push到数据中*/
          this.valueData.push(item.price)
          this.timeData.push(item.createTime)
        })
        this.ConsumptionLineChart();
      })
    },
    /*初始化查询一周内消费前五的数据模型*/
    ConsumptionRankingColumnChart() {
      let myChart = echarts.init(document.getElementById('main3'));
      let option = {
        title: {
          text: '一周内消费总额前五',
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return "姓名:" + params[0].name + "<br>" + "总额:" + ":" + params[0].data + "(元)"
          }
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readonly: false},
            restore: {show: false},
            saveAsImage: {show: true}
          }
        },
        xAxis: {
          type: 'category',
          data: this.columnChartName
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.columnChartValue,
            type: 'bar'
          }
        ]
      };
      myChart.setOption(option)
    },
    /*查询一周内消费前五的数据*/
    findConsumptionRankingColumnChart() {
      request.get("/report/expenditureColumnChart").then(res => {
        res.data.forEach(item => {
          this.columnChartName.push(item.name)
          this.columnChartValue.push(item.price)
        })
        this.ConsumptionRankingColumnChart()
      });
    }
  },
  created() {
    //加载执行查询方法
    this.findAllSpendingData();
    //加载查询折线图数据
    this.findDateByLine();
    //加载柱图数据
    this.findConsumptionRankingColumnChart();
  }
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>